<template>
  <div class="" v-loading="model.status === '查询' || modelPeople.status === '查询'">
    <Row style="margin: 10px 0px;">
      <span style="margin: 0px 10px;">
        <button type="button" class="ivu-btn ivu-btn-primary" @click="addPeople">
          <i class="ivu-icon ivu-icon-search"></i>
          <span>新增考试人员</span>
        </button>
      </span>
    </Row>
    <Table :columns="columnsPeople" :data="modelPeople.rows" border></Table>
    <Row style="margin: 10px 0px;">
        <Page :total="modelPeople.count" :page-size="modelPeople.pageSize" show-elevator style="text-align: center;" @on-change="loadPagePeople"></Page>
    </Row>

    <Modal :width="1100" v-model="peopleShow" title="增加考试人员">
      <Row style="margin: 10px 0px;">
        <label>姓名</label>
        <Input v-model="condition.username" placeholder="请输入姓名" clearable style="width: 100px"></Input>
        <label style="margin-left: 10px;">电话</label>
        <Input v-model="condition.userphone" placeholder="请输入考号" clearable style="width: 150px"></Input>
        <label style="margin-left: 10px;">警号</label>
        <Input v-model="condition.usernum" placeholder="请输入考号" clearable style="width: 150px"></Input>
        <span style="margin: 0px 10px;">
          <button type="button" class="ivu-btn ivu-btn-primary"  @click="search($getCondition(condition))">
            <i class="ivu-icon ivu-icon-search"></i>
            <span>查询</span>
          </button>
        </span>
      </Row>
      <Table :columns="columns" :data="model.rows"  border @on-selection-change="selected" @on-select="selectedOne"></Table>
      <Row style="margin: 10px 0px;">
          <Page :total="model.count" :page-size="model.pageSize" show-elevator style="text-align: center;" @on-change="loadPage"></Page>
      </Row>
      <div slot="footer">
        <Button type="primary" size="large" long  @click="confirm()">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import PagedList from '@/plugins/PagedList.js'
import axios from 'axios'

export default {
  title: '考试人员设置',
  name: 'paper-people-set',
  props: {
    data: {}
  },
  data () {
    return {
      testinfo: {},
      peopleShow: false,
      condition: {
        username: '',
        userphone: '',
        usernum: ''
      },
      selectedPeople: [],
      modelPeople: new PagedList('rs/sql/singleTable_OrderBy', 20,
      {items: "'*'", tablename: "'usertable'", orderitem: "'id'"}),
      model: new PagedList('rs/sql/singleTable_OrderBy', 10,
      {items: "'*'", tablename: "'usertable'", orderitem: "'id'"}),
      columnsPeople: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 80
        },
        {
            title: '姓名',
            key: 'username'
        },
        {
            title: '电话号码',
            key: 'userphone',
            width: 120
        },
        {
            title: '警号',
            key: 'usernum',
            width: 130
        },
        {
            title: '得分',
            key: 'usernum',
            width: 130
        },
        {
            title: '身份证号码',
            key: 'idnumber',
            width: 180
        },
        {
            title: '考号',
            key: 'examnum',
            width: 150
        },
        {
            title: '电子邮箱',
            key: 'emal',
            width: 200
        },
        {
            title: '操作',
            width: 100,
            align: 'center',
            render: (h, params) => {
            return h('div', [
                h('Button', {
                    props: {
                        type: 'text'
                    },
                    style: {
                        marginRight: '5px'
                    },
                    on: {
                        click: () => {
                          this.deletePeople(params.row)
                        }
                    }
                }, '删除')
            ]);
          }
        }
      ],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          type: 'index',
          align: 'center',
          width: 80
        },
        {
            title: '姓名',
            key: 'username'
        },
        {
            title: '电话号码',
            key: 'userphone',
            width: 120
        },
        {
            title: '警号',
            key: 'usernum',
            width: 130
        },
        {
            title: '身份证号码',
            key: 'idnumber',
            width: 180
        },
        {
            title: '考号',
            key: 'examnum',
            width: 150
        }
      ]
    }
  },
  mounted () {
    this.testinfo = Object({}, this.data)
  },
  methods: {
    search (condition) {
      this.model.search(condition)
    },
    deletePeople (row) {

    },
    loadPagePeople (index) {
      this.modelPeople.loadPage(index)
    },
    loadPage (index) {
      this.model.loadPage(index)
    },
    addPeople () {
      this.peopleShow = true
      this.search('1=1')
    },
    selected (arr) {
      this.selectedPeople = arr
      // arr.forEach(item => {
      //   item._checked = true
      // })
    },
    selectedOne (arr, row) {
      // console.log(arr, row);
      row._checked = true
    },
    confirm () {

    }
  },
  watch: {
    'data' () {
      this.testinfo = Object({}, this.data)
    }
  }
}
</script>
